<template>
  <section class="todoapp">
    <TodoHeader @add="addFn"></TodoHeader>
    <TodoMain
      :type="type"
      :list="list"
      @del="delFn"
      @change="changeFn"
      @isCheckAll="isCheckAllFn"
    ></TodoMain>
    <TodoFooter v-model="type" :list="list" @clear="clearFn"></TodoFooter>
  </section>
</template>

<script>
// import { mapState } from "vuex";
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  // created() {
  //   this.$store.dispatch("todolist/getList")
  // },
  // computed:{
  //   ...mapState("todolist",["listText"])
  // },
  data() {
    return {
      type: 'all',
      list: JSON.parse(localStorage.getItem('todo')) || [],
      // list: [
      //   { id: 1, name: '吃饭', isDone: true },
      //   { id: 2, name: '睡觉', isDone: false },
      //   { id: 3, name: '打豆豆', isDone: true },
      // ],
    }
  },
  /* @param: {Boolean} status 全选按钮最新的状态*/
  methods: {
    isCheckAllFn(status) {
      this.list.forEach((item) => (item.isDone = status))
    },
    // filterTypeFn(type) {
    //   this.type = type
    // },
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    changeFn(id) {
      this.list.forEach((item) => {
        if (item.id === id) {
          item.isDone = !item.isDone
        }
      })
    },
    addFn(name) {
      // 非空判断
      if (!name) {
        alert('请正确输入')
        return
      }
      this.list.unshift({
        // 获取当前的时间戳为id
        id: Date.now(),
        name: name,
        isDone: false,
      })
    },
    clearFn() {
      this.list = this.list.filter((item) => item.isDone === false)
      /*  this.list = this.list.filter((item) => !item.isDone) */
    },
  },
  watch: {
    list: {
      handler(newList) {
        localStorage.setItem('todo', JSON.stringify(newList))
      },
      deep: true,
    },
  },
}
</script>

<style></style>
